<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>流加载文档 - layui.flow</title>
	<link rel="stylesheet" href="../libs/layui/layui-2.9.14/dist/css/layui.css">
	<script src="../libs//layui//layui-2.9.14/dist/layui.js"></script>
	<style>


	</style>
</head>

<body style="margin:100px ;">

	<!-- data lazy loading-->
	<ul  style="border: 1px solid green; width: 100px;height: 500px;" >
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>

		
		<div id="demo" ></div>
	</ul>


	<!--image lazy loading
	注意：它只会针对以下 img 元素有效
	-->
	<img src="占位图地址" lay-src="预加载图地址"> 
	<br /><br />
	<img title="firstImage" src="./assets/flow/1.jpg" style="width: 100px;height: 100px;">
	<br /><br />
	<img src="" title="secondImage"  lay-src="./assets/flow/1.jpg" style="width: 100px;height: 100px;">       

	<script>
		layui.use('flow', function () {
			var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
			var flow = layui.flow;

			//当你执行这样一个方法时，即对页面中的全部带有 lay-src 的 img 元素开启了懒加载（当然你也可以指定相关 img）
  			flow.lazyimg(); 
			
			<!-- 只是提供了加载的工具（包括样式和加载动画），具体加载后的数据及样式的展示与存储，还是要自己弄  -->
			flow.load({
				elem: '#demo',  //指定列表容器
				done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
					console.log(page,next)
					var lis = [];
					//以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
					$.get('./assets/flow/data.json?page=' + page, function (res) {
						console.log("res:",res);
						//假设你的列表返回在data集合中
						layui.each(res.data, function (index, item) {
							lis.push('' + item + '');
						});

						console.log("---",lis);
						//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
						//pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
						next(lis.join(''), page < res.pages);
					});
				}
			});
		
		
		});
	</script>

</body>

</html>